<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>职位管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 表单数据渲染 -->
<div style="padding: 16px;">
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-form layui-form-pane" style="margin-bottom: 15px;" lay-filter="searchForm">
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">职位标题</label>
      <div class="layui-input-inline">
        <input type="text" name="title" placeholder="请输入职位标题" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">发布者</label>
      <div class="layui-input-inline">
        <input type="text" name="publishUser" placeholder="请输入发布者姓名" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-inline">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline">
        <select name="status">
          <option value="">全部</option>
          <option value="1">通过</option>
          <option value="0">不通过</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item layui-inline">
      <button class="layui-btn layui-btn-sm" lay-submit lay-filter="searchBtn">
        <i class="layui-icon layui-icon-search"></i> 查询
      </button>
      <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" id="resetBtn">
        <i class="layui-icon layui-icon-refresh"></i> 重置
      </button>
    </div>
  </div>
</script>

<!-- 操作列模板 -->
<script type="text/html" id="toolDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-xs" lay-event="detail">职位详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多操作 <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>

<!-- 详情弹窗模板 -->
<script type="text/html" id="detailTpl">
  <div style="padding: 20px;">
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">职位ID</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.id }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">发布者</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.user.info.realName || d.user.info.username || '' }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">职位标题</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.title }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">职位描述</label>
        <div class="layui-input-block">
          <textarea class="layui-textarea" readonly>{{ d.description || '无' }}</textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">职位类型</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.jobType }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">薪资范围</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.salaryRange }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">工作地点</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.location }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">学历要求</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.education }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.postTime }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">过期时间</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.expirationTime || '无' }}" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <input type="text" value="{{ d.status == 1 ? '通过' : '不通过' }}" class="layui-input" readonly>
        </div>
      </div>
    </form>
  </div>
</script>

<!--自定义解析器模板： 解析发布者姓名-->
<script type="text/html" id="publishRealName">
  {{#  if(d.user && d.user.info){ }}
  {{ d.user.info.realName || d.user.info.username || '未知' }}
  {{#  } else { }}
  {{ d.publishRealName || '未知' }}
  {{#  } }}
</script>

<!--JS交互实现-->
<script src="/layui/layui.js"></script>
<script>
  layui.use(['table', 'dropdown', 'form', 'laydate'], function(){
    var table = layui.table; // 表格
    var dropdown = layui.dropdown; // 下拉菜单
    var $ = layui.$; // jquery
    var layer = layui.layer; // 弹出层
    var form = layui.form; // 表单
    var laydate = layui.laydate;  // 日期组件

    // 创建渲染实例
    table.render({
      elem: '#test',
      url: '/api/job/page', // 此处为静态模拟数据，实际使用时需换成真实接口
      toolbar: '#toolbarDemo',
      height: 'full-35', // 最大高度减去其他容器已占有的高度差
      css: [ // 重设当前表格样式
        '.layui-table-tool-temp{padding-right: 145px;}'
      ].join(''),
      cellMinWidth: 80,
      totalRow: false, // 关闭合计行
      page: true,// 开启分页
      cols: [function(){
        var arr = [
          {field: 'id', title: '职位ID', width: 100, sort: true},
          {field: 'publishRealName', title: '发布者', width: 120, templet: '#publishRealName'},
          {field: 'title', title: '职位标题', width: 200},
          {field: 'jobType', title: '职位类型', width: 120},
          {field: 'salaryRange', title: '薪资范围', width: 120},
          {field: 'location', title: '工作地点', width: 150},
          {field: 'education', title: '学历要求', width: 120},
          {field: 'postTime', title: '发布时间', width: 180, sort: true},
          {field: 'status', title: '状态', width: 100, templet: function(d){
              return d.status == 1 ? '<span class="layui-badge layui-bg-green">通过</span>'
                      : '<span class="layui-badge">不通过</span>';
            }},
          {fixed: 'right', title: '操作', toolbar: '#toolDemo', width: 200}
        ];

        // 初始化筛选状态
        var local = layui.data('table-filter-test'); // 获取对应的本地记录
        layui.each(arr, function(index, item){
          if(item.field in local){
            item.hide = local[item.field];
          }
        });
        return arr;
      }() ],
      done: function(){
        var id = this.id;

        // 行模式
        dropdown.render({
          elem: '#rowMode',
          data: [{
            id: 'default-row',
            title: '单行模式（默认）'
          },{
            id: 'multi-row',
            title: '多行模式'
          }],
          // 菜单被点击的事件
          click: function(obj){
            var checkStatus = table.checkStatus(id)
            var data = checkStatus.data; // 获取选中的数据
            switch(obj.id){
              case 'default-row':
                table.reload('test', {
                  lineStyle: null // 恢复单行
                });
                layer.msg('已设为单行');
                break;
              case 'multi-row':
                table.reload('test', {
                  // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                  lineStyle: 'height: 95px;'
                });
                layer.msg('即通过设置 lineStyle 参数可开启多行');
                break;
            }
          }
        });
      },
      error: function(res, msg){
        console.log(res, msg)
      }
    });

    // 查询功能实现
    form.on('submit(searchBtn)', function(data){
      // 获取表单数据并重载表格
      table.reload('test', {
        where: data.field,  // 传递查询条件
        page: { curr: 1 }  // 重置到第一页
      });
      return false;
    });


    // 重置功能实现
    $('#resetBtn').on('click', function(){
      // 清空表单字段
      form.val('searchForm', {
        title: '',
        publishUser: '',
        status: ''
      });

      // 重置表格（清空查询条件）
      table.reload('test', {
        where: {},
        page: { curr: 1 }
      });
    });

    // 触发单元格工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;

      if(obj.event === 'detail'){
        // 职位详情弹窗
        layer.open({
          title: '职位详情 - ' + data.id,
          type: 1,
          area: ['600px', '80%'],
          content: layui.laytpl($('#detailTpl').html()).render(data)
        });
      }
      else if(obj.event === 'more'){
        // 更多操作 - 状态管理
        dropdown.render({
          elem: this,
          show: true,
          data: [{
            title: '审核通过',
            id: 'approve'
          },{
            title: '审核不通过',
            id: 'reject'
          },{
            title: '删除职位',
            id: 'delete'
          }],
          click: function(menuData){
            if(menuData.id === 'approve' || menuData.id === 'reject'){
              var newStatus = menuData.id === 'approve' ? 1 : 0;
              var statusText = newStatus == 1 ? "通过" : "不通过";

              layer.confirm('确定将职位状态设为"' + statusText + '"吗？', function(index){
                $.ajax({
                  url: '/api/job/audit?id=' + data.id + '&status=' + newStatus,
                  type: 'PUT',
                  success: function(res){
                    if(res.code === 200){
                      layer.msg('状态更新成功');
                      // 更新当前行数据
                      obj.update({
                        status: newStatus
                      });
                    } else {
                      layer.msg('操作失败: ' + res.msg, {icon: 2});
                    }
                    layer.close(index);
                  },
                  error: function(){
                    layer.msg('请求失败，请检查网络', {icon: 2});
                  }
                });
              });
            }
            else if(menuData.id === 'delete') {
              layer.confirm('确定删除该职位吗？', function(index){
                $.ajax({
                  url: '/api/job/delete/' + data.id,
                  type: 'DELETE',
                  success: function(res){
                    if(res.code === 200){
                      layer.msg('删除成功');
                      obj.del(); // 删除表格行
                    } else {
                      layer.msg('删除失败: ' + res.msg, {icon: 2});
                    }
                    layer.close(index);
                  }
                });
              });
            }
          }
        });
      }
    });
  });
</script>
</body>
</html>